<template>
	<div :id="id" class="chart"></div>
</template>

<script>
export default {
	props: ['all', 'onTime', 'overTime'],
	data() {
		return {
			id: this.getID(),
			myChart: null,
		};
	},
	methods: {
		getID() {
			return 'oeeboard-chart1-' + new Date().getTime() + Math.random();
		},
		resize() {
			this.myChart.resize();
		},
		initChart() {
			this.myChart = echarts.init(document.getElementById(this.id));
			const option = {
				title: {
					text: this.onTime!=0 ? ((this.onTime * 100) / this.all).toFixed(2) + '%' : '0%',
					left: 'center',
					top: '45%',
				},
				tooltip: {
					show: false,
				},
				series: [
					{
						type: 'pie',
						color: ['#82b5f4', '#efb888'],
						radius: ['60%', '70%'],
						roseType: 'radius',
						hoverAnimation: false,
						label: {
							show: true,
							position: 'center',
							normal: {
								show: false,
								position: 'center',
							},
						},
						data: [{ value: this.onTime }, { value: this.overTime }],
					},
				],
			};
			this.myChart.setOption(option);
			window.addEventListener('resize', () => {
				setTimeout(this.resize, 100);
			});
		},
	},
	watch: {
		all() {
			this.initChart();
		},
	},

	mounted() {
		this.initChart();
	},
	destroyed() {
		window.removeEventListener('resize', this.resize);
	},
};
</script>

<style scoped>
.chart {
	width: 100%;
	height: 100%;
}
</style>
